<template>
  <view class="page">
    <view class="container bg-c1" v-if="flag">
      <view class="title border-bottom">
        <text>{{currency}}付款</text>
      </view>
      <view class="middle">
      <image class="img1" src="../../../static/images/home/stripCode.png"></image>
      <text class="c7">363474******查看数字</text>
      <image class="img2" src="../../../static/images/home/ewm.png"></image>
      <view class="refresh-code">
        <uni-icon type="reload" size="20" color="#B4B9BF"></uni-icon>
        <text class="fs24">点击手动刷新二维码</text>
      </view>
      </view>
      <view class="bottom" @click="paymentTypeShade=!paymentTypeShade">
        <text>付款方式</text>
        <view class="right">
          <text>{{currency}}</text>
          <uni-icon type="arrowright" class="arrowright" size="20" color="#ABABAB"></uni-icon>
        </view>
      </view>
    </view>
    <view class="gathering">
      <text>我要收款</text>
    </view>

    <!-- <view class="container bg-c1" v-else>
      <view class="text1">开启付款码</view>
      <view class="text2">使用该功能，请设置支付密码</view>
      <view class="btn">去添加</view>
      <view class="group">
        <text class="fs32">直接开启付款码</text>
        <text class="grace-iconfont icon-arrow-right"></text>
      </view>
    </view> -->

    <uniPopup :show="moreShow" type="bottom" @hidePopup="handleMore(false)">
      <view hover-class="none" class="popup-item" @click="handleUrl('/pages/HomePage/Payment/instructions')">
        使用说明
      </view>
      <!-- <view hover-class="none" class="popup-item border" @click="handleCeaseEmploy">
        暂停使用
      </view>
      <view hover-class="none" class="popup-item border-top" @click="handleCodeRefresh">
        付款码刷新
      </view> -->
      <view hover-class="none" class="popup-item border" @click="handleUrl('/pages/HomePage/Payment/feedback')">
        问题反馈
      </view>
      <view class="popup-item" @click="handleMore(false)">取消</view>
    </uniPopup>

    <view class="cease-employ" v-show="ceaseEmploy" @click="hideMask">
      <view class="content" @click.stop="handleContent">
        <view class="top">
          <text>确定不继续使用付款功能？</text>
          <text class="fs24">资金保障中</text>
        </view>
        <view class="middle" @click="handleCease">暂停使用付款功能</view>
        <view class="bottom" @click="ceaseEmploy = false">取消</view>
      </view>
    </view>
    <view class="payment-type" v-show="paymentTypeShade" @click="paymentTypeShade=false">
      <view class="wrap" @click.stop>
        <view class="item fs34">请选择支付方式</view>
        <view class="item border fs28" data-text="阿币"  @click="handleType($event)">阿币（剩余1234.00）</view>
        <view class="item fs28" data-text="美元" @click="handleType($event)">美元（剩余2344.18）</view>
      </view>
    </view>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-app/uni-popup.vue";
import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue";
export default {
  components: {
    uniPopup,
    uniIcon
  },
  data() {
    return {
      currency:'阿币',
      moreShow: false,
      ceaseEmploy: false,
      flag: true,
      paymentTypeShade:false
    };
  },
  methods: {
    handleType(e){
        this.currency =  e.currentTarget.dataset.text
        this. paymentTypeShade = false
    },
    handleMore(bl) {
      this.moreShow = bl;
    },
    handleUrl(url) {
      this.moreShow = false;
      uni.navigateTo({
        url: url
      });
    },
    hideMask() {
      this.ceaseEmploy = false;
    },
    handleContent() {},
    handleCease() {
      uni.navigateBack();
    },
    handleCeaseEmploy() {
      this.moreShow = false;
      this.ceaseEmploy = true;
    },
    handleCodeRefresh() {
      this.moreShow = false;
    }
  },
  onNavigationBarButtonTap() {
    this.moreShow = true;
  }
};
</script>


<style lang="scss" scoped>
@import "../../../styles/global/index";
.page {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
  background: #8CA0BB;
}
.container {
  position: relative;
  height: 1016upx;
  width: 690upx;
  margin: 24upx auto;
  display: flex;
  flex-direction: column;
  border-radius: 12upx;
  .title{
    @include size(100%,90upx);
    display: flex;
    align-items: center;
    text{
      padding-left:30upx;
    }
  }
  .middle{
    @include flex-cl;
    flex-wrap: nowrap;
      .img1 {
    @include size(597upx, 180upx);
    margin: 60upx 0 24upx 0;
  }
  .img2 {
    @include size(356upx, 356upx);
    margin-top: 60upx;
  }
  .refresh-code{
    padding-top:28upx;
    display: flex;
    align-items: center;
    text{
      padding-left:10upx;
      color:#B4B9BF;
    }
  }
  }
  .bottom{
    @include flex-bw;
    border-top: 1px solid #eee;
    margin: 38upx 36upx 0 36upx;
    height: 86upx;
    padding-left: 10upx;
    .right{
      display: flex;
      align-items: center;
      line-height: 1;
    }
  }
  .text1{
    padding-top:170upx;
    font-size: 36upx;
  }
  .text2{
    padding-top:40upx;
    font-size: 32upx;
  }
  .btn{
    @include size(356upx,60upx);
    line-height: 60upx;
    background: #007BC3;
    color:#fff;
    margin:140upx auto 0 auto;
  }
  .group{
    text-align: center;
    margin-top:70upx;
    padding: 0 150upx;
    text{
      color:#007BC3;
    }
    .icon-arrow-right{
      vertical-align: middle;
    }
  }
}

.gathering{
  margin: 36upx 28upx 0 28upx;
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  border-radius: 8upx;
  text{
    padding-left:46upx;
  }
}

.popup-item {
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  &:active {
    background: #eee;
  }
  &:nth-last-of-type(1) {
    margin-top: 10upx;
  }
}

.cease-employ {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.4);
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: red;
  }
  .content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    @include size(510upx, 440upx);
    border-radius: 4upx;
    .top {
      @include flex-cl;
      height: 230upx;
      border-bottom: 1px solid #eee;
    }
    .middle {
      text-align: center;
      height: 100upx;
      line-height: 100upx;
      border-bottom: 1px solid #eee;
      color: #007bc3;
    }
    .bottom {
      text-align: center;
      height: 100upx;
      line-height: 100upx;
      color: #007bc3;
    }
  }
}
.payment-type{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: .4);
  .wrap{
    position: absolute;
    top: 41%;
    left:50%;
    transform: translate(-50%,-50%);
    background: #fff;
    @include size(540upx,370upx);
    border-radius: 18upx;
    .item{
      @include flex-center;
      color:#333333;
      &:active{
        background: #f8f8f8;
      }
      &:nth-child(1){
        height: 138upx;
        color: #A3A5B0;
        &:active{
        background: none;
        }
      }
      &:nth-child(2){
        height: 116upx;
      }
      &:nth-child(3){
        height: 118upx;
      }
    }
  }
}

</style>